<script setup lang="ts">
import { addPublish, deletePublish, editPublish, getPublish } from "@/api/book";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Recognition"
});

const imageUrl = ref();

const resultImg = ref();

const loading = ref(false);

const handleSuccess = (response, uploadFile) => {
  loading.value = true;
  resultImg.value = response.data.file;
  console.log(resultImg);
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const reprovision = () => {
  imageUrl.value = "";
  resultImg.value = "";
};
</script>
<template>
  <div class="book">
    <div class="rightdiv">
      <h1>上传图片</h1>
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1:8000/image_recognition"
        :on-success="handleSuccess"
        :limit="1"
        :show-file-list="false"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <IconifyIconOnline
          title="上传图片"
          v-else
          class="avatar-uploader-icon"
          icon="ant-design:picture-outlined"
        />
      </el-upload>
    </div>

    <div class="leftdiv">
      <h1>结果展示</h1>
      <el-image
        v-if="imageUrl"
        :src="'http://127.0.0.1:8000/upimg2/' + resultImg"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :initial-index="4"
        fit="cover"
      />
      <IconifyIconOnline
        v-else
        class="avatar-uploader-icon"
        icon="ant-design:picture-outlined"
      />

      <el-button type="primary" size="large" plain @click="reprovision"
        >重置</el-button
      >
    </div>
  </div>
</template>

<style scoped>
.book {
  display: flex;
  flex-direction: column;
  padding: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 278px;
  height: 278px;
  text-align: center;
}
</style>
